/**
 * 数据源管理页面
 * 
 * 数据源的创建、编辑、测试和管理
 */

import React from 'react'
import { Database, Plus, Search, Filter } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

const DataSourcesPage: React.FC = () => {
  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">数据源管理</h1>
          <p className="text-muted-foreground">
            管理和配置各种数据源连接
          </p>
        </div>
        <Button>
          <Plus className="h-4 w-4 mr-2" />
          添加数据源
        </Button>
      </div>

      {/* 搜索和筛选 */}
      <div className="flex items-center gap-4">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <input
            type="text"
            placeholder="搜索数据源..."
            className="w-full pl-10 pr-4 py-2 bg-muted/50 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
          />
        </div>
        <Button variant="outline">
          <Filter className="h-4 w-4 mr-2" />
          筛选
        </Button>
      </div>

      {/* 数据源列表 */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {/* 示例数据源卡片 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Database className="h-5 w-5" />
              MySQL 生产数据库
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">状态</span>
                <span className="text-sm text-green-600">已连接</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">类型</span>
                <span className="text-sm">MySQL</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">最后测试</span>
                <span className="text-sm">2分钟前</span>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 更多数据源卡片... */}
        <Card className="border-dashed border-2">
          <CardContent className="flex items-center justify-center h-32">
            <div className="text-center">
              <Plus className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
              <p className="text-sm text-muted-foreground">添加新数据源</p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

export default DataSourcesPage
